<template>
  <div class="loginBox">
    <el-form
      ref="form"
      :model="form"
      class="login"
      :label-position="labelPosition"
    >
      <div style="height: 450px">
        <img src="../assets/back.png" style="height: 450px" />
      </div>
      <div class="loginform">
        <h3 style="font-weight: 400; font-style: normal; font-size: 30px">
          付费预约自习室
        </h3>
        <p
          style="
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #a9a9a9;
            margin-top: 10px;
          "
        >
          WELCOMEE欢迎登录
        </p>
        <el-form-item label="账号">
          <el-input placeholder="请输入账号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button type="primary" @click="toHome">立即登录</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      labelPosition: "top",
    };
  },
  methods: {
    toHome: function () {
      this.$axios({
        url: "/emp/login",
        method: "post",
        data: {
          ename: this.form.username,
          password: this.form.password,
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
          sessionStorage.setItem("token", data.data.token);
          sessionStorage.setItem("user",data.data.name);
          this.$message.success("登录成功！");
          this.$router.push("/home");
        }
      });
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.loginBox {
  width: 100%;
  height: 100vh;
  background-image: url(../assets/background.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login {
  padding: 40px 40px 40px 40px;
  background: rgba(255, 255, 255, 0.99);
  width: 900px;
  height: 500px;
  border-radius: 25px;
  display: flex;
  align-items: center;
}
.loginform {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 80px;
}
.el-input__inner {
  width: 200px;
}
.Verification {
  display: flex;
}
</style>
